<template>
    <div>
        <van-nav-bar fixed="true" title="律师列表" left-text="返回" left-arrow="" @click-left="onClickLeft" >
            <template #right>
                <van-button type="primary" @click="showPopup1" size="small">添加律师</van-button>
            </template>
        </van-nav-bar>
        <!--        添加律师弹窗-->
        <van-popup v-model="show1" closeable="true" position="bottom" style="height: 700vh;text-align: center">
            <div style="margin-top: 46px">
                <span >选择律师头像</span>
            </div>
            <van-radio-group v-model="radio" direction="horizontal" style="justify-content: center;margin-top: 10px">
                <van-radio name="../../static/images/nan.png" icon-size="24px"><img src="../../static/images/nan.png" width="50" height="50" style="border-radius: 50%"></van-radio>
                <van-radio name="../../static/images/nv.png" icon-size="24px"><img src="../../static/images/nv.png" width="50" height="50" style="border-radius: 50%"></van-radio>
            </van-radio-group>
            <van-field
                    label-align="right"
                    readonly
                    clickable
                    name="picker"
                    :value="value"
                    label="律师类别"
                    placeholder="点击选择律师类别"
                    @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                />
            </van-popup>
            <van-field
                    style="margin-top: 10px"
                    v-model="lawyername"
                    required
                    label="用户名"
                    placeholder="请输入用户名"
            />
            <van-field
                    v-model="lawyersex"
                    required
                    label="性别"
                    placeholder="请输入性别"
            />
            <van-field
                    v-model="lawyerage"
                    required
                    label="年龄"
                    placeholder="请输入年龄"
            />
            <van-field
                    v-model="lawyernumber"
                    required
                    label="账号"
                    placeholder="请输入账号"
            />
            <van-field
                    v-model="pwd"
                    required
                    label="密码"
                    placeholder="请输入密码"
            />
            <van-button style="margin-top: 10px" type="primary" @click="insertLawyer" size="small">确认</van-button>
        </van-popup>

        <!--        修改律师信息弹窗-->
        <van-popup v-model="show2" closeable="true" position="bottom" style="height: 700vh;text-align: center">
            <div style="margin-top: 46px">
                <span >选择律师头像</span>
            </div>
            <van-radio-group v-model="radio" direction="horizontal" style="justify-content: center">
                <van-radio name="../../static/images/nan.png" icon-size="24px"><img src="../../static/images/nan.png" width="50" height="50" style="border-radius: 50%"></van-radio>
                <van-radio name="../../static/images/nv.png" icon-size="24px"><img src="../../static/images/nv.png" width="50" height="50" style="border-radius: 50%"></van-radio>
            </van-radio-group>
            <van-field
                    label-align="right"
                    readonly
                    clickable
                    name="picker"
                    :value="value"
                    label="律师类别"
                    placeholder="点击选择律师类别"
                    @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                />
            </van-popup>
            <van-field
                    style="margin-top: 10px"
                    v-model="lawyername"
                    required
                    label="用户名"
                    placeholder="请输入用户名"
            />
            <van-field
                    v-model="lawyersex"
                    required
                    label="性别"
                    placeholder="请输入性别"
            />
            <van-field
                    v-model="lawyerage"
                    required
                    label="年龄"
                    placeholder="请输入年龄"
            />
            <van-field
                    v-model="lawyernumber"
                    required
                    label="账号"
                    placeholder="请输入账号"
            />
            <van-field
                    v-model="pwd"
                    required
                    label="密码"
                    placeholder="请输入密码"
            />
            <van-button style="margin-top: 10px" type="primary" @click="updateLawyer" size="small">确认</van-button>
        </van-popup>
        <div style="margin-top: 46px;margin-bottom: 46px">
            <van-search
                    v-model="value"
                    placeholder="请输入搜索关键词"
                    input-align="center"
            />
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <van-popup v-model="show" closeable="true" position="bottom" style="height: 700vh">
                    <van-cell style="margin-top: 46px">现场图</van-cell>
                    <van-cell>现场图</van-cell>
                    <van-cell style="position: fixed;bottom: 0px">
                        <van-button @click="showPopup2" type="primary" size="small">修改信息</van-button>
                        <van-button @click="deleteLawyer" style="float: right" type="danger" size="small">删除律师
                        </van-button>
                    </van-cell>
                </van-popup>
                <van-cell is-link @click="showPopup" v-for="item in list" :key="item" :title="item"/>
            </van-list>
        </div>

    </div>
</template>

<script>
    export default {
        name: "lawyerManager",
        data(){
            return{
                list: [],
                loading: false,
                finished: false,
                show: false,
                show1: false,
                show2: false,
                showPicker: false,
                value:'',
                radio:'',
                columns: ['行政律师', '经济律师', '民事律师','刑事律师'],
                lawyername:'',
                lawyersex:'',
                lawyerage:'',
                lawyernumber:'',
                pwd:''
            }
        },
        methods:{
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            onClickLeft(){
                this.$router.push({path:'adminHome'})
            },
            showPopup() {
                this.show = true;
            },
            showPopup1() {
                this.show1 = true;
            },
            showPopup2() {
                this.show2 = true;
            },
            insertLawyer() {


            },
            updateLawyer() {


            },
            deleteLawyer() {


            },
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }

                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },

        }
    }
</script>

<style scoped>

</style>
